 <!--
 Template Name: role
 Create author: qinglong
 Create Date  : 2021-06-23
 -->
<template>
  <div class="page">
    <el-card shadow="never">
      <div slot="header" class="head">
        <span>菜单管理</span>
        <el-button @click="addMenu()" size="mini" type="primary">新增</el-button>
      </div>
      <el-scrollbar>
        <el-tree :data="treeData" :indent="25" @node-click="getFunc" node-key="id" highlight-current :default-expanded-keys="treeActive" default-expand-all>
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.name }}</span>
            <span>
              <el-button type="text" size="mini" @click.stop="() => editMenu(data)" icon="el-icon-edit" />
              <el-button type="text" size="mini" @click.stop="() => addMenu(data)" icon="el-icon-circle-plus-outline" />
              <el-button type="text" size="mini" @click.stop="() => delMenu(data)" icon="el-icon-delete" />
            </span>
          </span>
        </el-tree>
      </el-scrollbar>
    </el-card>
    <mixTable :data="tableData" :fields="tableFields" row-key="id" @select-change="selection" />
    <el-dialog title="菜单/功能" :visible.sync="addShow" width="500px">
      <mixForm v-model="formData" :fields="addFields" />
      <div slot="footer">
        <el-button @click="addShow=false" type="info">取消</el-button>
        <el-button v-if="editShow" @click.native="onEditMenu" type="primary">确定</el-button>
        <el-button v-else @click.native="onAddMenu" type="primary">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { role_tree, role_list, role_add, role_del, role_edit } from "@/api";
import routes from "@/router/asyncRoute";
export default {
  name: "roles",
  data() {
    return {
      treeActive: [],
      addShow: false,
      editShow: false,
      select: [],
      formData: {},
      treeData: [],
      addFields: [
        { label: "上级菜单", prop: "pid", k: "select", config: { label: "name", value: "id" }, options: this.getList },
        { label: "名称", prop: "name" },
        { label: "path", prop: "path" },
        {
          label: "类型",
          prop: "type",
          k: "select",
          option: [
            { label: "菜单页面", value: 1 },
            { label: "功能接口", value: 2 }
          ]
        },
        { label: "接口标识", prop: "code", isShow: (data) => data.type === 2 },
        { label: "菜单图标", prop: "icon", isShow: (data) => data.type === 1 },
        { label: "关联页面", prop: "code", k: "select", options: this.getRouter, isShow: (data) => data.type === 1 },
        { label: "备注信息", prop: "remarks", type: "textarea", maxlength: 200, showWordLimit: true }
      ],
      searchData: {},
      searchFields: [{ k: "button", option: [{ label: "添加菜单", click: this.addMenu }] }],
      tableData: [],
      tableFields: [
        { label: "id", prop: "id" },
        { label: "名称", prop: "name" },
        { label: "标识", prop: "code" },
        { label: "path", prop: "path" },
        { label: "type", prop: "type" },
        {
          label: "操作",
          k: "button",
          width: 250,
          fixed: "right",
          option: [
            { label: "修改", click: this.editFunc, type: "warning" },
            { label: "删除", click: this.delFunc, type: "danger" }
          ]
        }
      ]
    };
  },
  created() {
    this.getTree();
  },
  methods: {
    // 获取树形菜单
    async getTree() {
      let { data } = await role_tree({ type: 1 });
      this.treeData = data.data;
    },
    // 获取菜单列表
    async getList() {
      let { data } = await role_list({ type: 1 });
      return data?.data?.data || [];
    },
    // 获取数据接口列表
    async getFunc(item) {
      this.treeActive = [item.id];
      let res = await role_list({ pid: item.id, type: 2 });
      let { page, size, total, data } = res.data.data;
      this.tableData = data;
      this.page = { page, size, total };
    },
    // 多选
    selection(arr) {
      this.select = arr;
    },
    // 添加菜单
    addMenu(data = {}) {
      let { id = null } = data;
      this.formData = { pid: id };
      this.addShow = true;
      this.editShow = "";
    },
    // 修改菜单
    editMenu(data) {
      this.formData = { ...data };
      this.addShow = true;
      this.editShow = "edit";
    },
    editFunc({ row }) {
      this.editMenu(row);
      this.getFunc({ id: row.pid });
    },
    delFunc({ row }) {
      this.delMenu(row);
      this.getFunc({ id: row.pid });
    },
    // 删除菜单
    async delMenu(data) {
      let id = data.id;
      await role_del({ id });
      this.getTree();
    },
    // 新增菜单/功能
    async onAddMenu() {
      try {
        let params = { ...this.formData };
        await role_add(params);
        if (params.type == 1) this.getTree();
        if (params.type == 2) this.getFunc({ id: params.pid });
        this.formData = {};
        this.addShow = false;
      } catch (error) {
        console.log(error);
      }
    },
    // 修改菜单/功能
    async onEditMenu() {
      try {
        let params = { ...this.formData };
        await role_edit(params);
        if (params.type == 1) this.getTree();
        if (params.type == 2) this.getFunc({ id: params.pid });
        this.formData = {};
        this.editShow = "";
        this.addShow = false;
      } catch (error) {
        console.log(error);
      }
    },
    // 获取关联路由表
    getRouter() {
      let route = routes();
      return route.map((e) => {
        return { label: e.meta.title, value: e.name };
      });
      // let code = [];
      // let route = routes();
      // JSON.stringify(this.treeData, function (a, b) {
      //   if (b?.code) code.push(b.code);
      //   return b;
      // });
      // let arr = route.filter((e) => !code.includes(e.name));
      // return arr.map((e) => {
      //   return { label: e.meta.title, value: e.name };
      // });
    }
  }
};
</script>
 <style lang='scss' scoped>
.page {
  height: 100%;
  display: flex;
  align-items: stretch;
  flex-direction: row !important;
  justify-content: space-between;
  .el-card {
    flex: 0 0 350px;
    margin-right: 20px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
}
</style>